{% extends "base.html" %}
{% block title %}列表{% endblock %}

{% block content %}
{% if news_list %}
    <table class="table">
        <thead><tr><td>名称</td><td>热度变化</td><td>日期</td><td>操作</td></tr></thead>
        <tbody>
         {% for item in news_list %}
        <tr>
            <td>{{ item.title }}</td>
            <td>{{item.increment}}</td>
            <td>{{item.updatetime}}</td>

            <td><a href="/fsp_diffusion_detail?articleid={{ item.sameid1 }}" target="_blank"> json</a>　｜　
            <a onclick="draw('{{item.sameid1}}')"> 热度:{{item.degree}}</a></td>
        </tr>

        {% endfor %}
        </tbody>
    </table>
{% endif %}

<div id="myChart" style="width:600px;height:600px"></div>
{% endblock%}

{% block script %}

<script type="text/javascript" src="http://172.16.17.100:8081/echarts.min.js" charset="utf-8"></script>

<script type="text/javascript">


function draw(actial_id) {

    var getDataURL = '/fsp_diffusion_detail?articleid=' + actial_id

     $.ajax({
        url: getDataURL,
        useDefaultXhrHeader: false, //important, otherwise its not working
        type: "GET",
        dataType: 'text',
        success: function(response, opts) {
             var myChart = echarts.init(document.getElementById("myChart"))
             res = JSON.parse(response)

             //日期转换
             var date_list = []
             var data1 = []
             var data2 = []
             res.obj.data1.forEach(function (val, index, arr) {
                var x = new Date(val.x)
                x = x.toUTCString()
                date_list.push(x.split(' ')[4])
                data1.push({value:val.y, media:val.mediaName, time:x})
             })

             res.obj.data2.forEach(function (val, index, arr) {
                data2.push({value:val.y, media:val.mediaName})
             })

             option = {
                title: {
                    text: '热度趋势图',
                    left: '50%',
                    textAlign: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    backgroundColor: 'rgba(255,255,255,1)',
                    padding: [5, 10],
                    textStyle: {
                        color: '#7588E4',
                    },
                    extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)',
                    formatter: function (params) {
                        return params[0]['data']['time'] + '<br/>' + '热度:' + params[1]['data']['value'] + '<br/>' + params[1]['data']['media']
                    }

                },
                legend: {
                    right: 20,
                    orient: 'vertical',
                    data: ['热度','增量']
                },
                xAxis: {
                    type: 'category',
                    data: date_list,
                    boundaryGap: false,
                    splitLine: {
                        show: true,
                        interval: 'auto',
                        lineStyle: {
                            color: ['#D4DFF5']
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#609ee9'
                        }
                    },
                    axisLabel: {
                        margin: 10,
                        textStyle: {
                            fontSize: 14
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            color: ['#D4DFF5']
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#609ee9'
                        }
                    },
                    axisLabel: {
                        margin: 10,
                        textStyle: {
                            fontSize: 14
                        }
                    }
                },
                series: [{
                    name: '增量',
                    type: 'line',
                    smooth: true,
                    showSymbol: false,
                    symbol: 'circle',
                    symbolSize: 6,
                    data: data1,
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(199, 237, 250,0.5)'
                            }, {
                                offset: 1,
                                color: 'rgba(199, 237, 250,0.2)'
                            }], false)
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#f7b851'
                        }
                    },
                    lineStyle: {
                        normal: {
                            width: 3
                        }
                    }
                }, {
                    name: '热度',
                    type: 'line',
                    smooth: true,
                    showSymbol: false,
                    symbol: 'circle',
                    symbolSize: 6,
                    data: data2,
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(216, 244, 247,1)'
                            }, {
                                offset: 1,
                                color: 'rgba(216, 244, 247,1)'
                            }], false)
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#58c8da'
                        }
                    },
                    lineStyle: {
                        normal: {
                            width: 3
                        }
                    }
                }]
            };

            myChart.setOption(option);
        }
     })
}

</script>

{% endblock %}